<template>
  <div class="ant-list ant-list-split">
    <ul class="ant-list-items">
      <li class="ant-list-item">
        <div class="ant-list-item-meta">
          <div class="ant-list-item-meta-content">
            <h4 class="ant-list-item-meta-title">QQ登录</h4>
            <div class="ant-list-item-meta-description">
              已绑定QQ：<span class="strong">9464***929</span>
            </div>
          </div>
        </div>
        <div class="ant-list-item-action">
          <el-button type="primary" link @click="emailFormDialogVisible = true"
            >更换</el-button
          >
          <el-divider direction="vertical" />
          <el-button type="primary" link @click="emailFormDialogVisible = true"
            >解绑</el-button
          >
          <el-dialog
            v-model="emailFormDialogVisible"
            title="绑定邮箱"
            width="600px"
          >
            <div>
              <el-form
                ref="emailFormRef"
                :model="emailForm"
                :rules="emailRules"
                label-position="top"
                label-width="120px"
                status-icon
              >
                <el-form-item label="当前邮箱" prop="oldEmail">
                  <el-input v-model="emailForm.oldEmail" readonly />
                </el-form-item>
                <el-form-item label="新邮箱" prop="email">
                  <el-input v-model="emailForm.email" />
                </el-form-item>
                <el-form-item label="验证码" prop="code">
                  <div class="w-full">
                    <el-row :gutter="20">
                      <el-col :span="18">
                        <el-input v-model="emailForm.code" />
                      </el-col>
                      <el-col :span="6">
                        <el-button type="primary" class="w-full"
                          >发送验证码</el-button
                        >
                      </el-col>
                    </el-row>
                  </div>
                </el-form-item>
              </el-form>
            </div>
            <template #footer>
              <span class="dialog-footer">
                <el-button
                  @click="
                    resetForm(emailFormRef);
                    emailFormDialogVisible = false;
                  "
                  >取消</el-button
                >
                <el-button type="primary" @click="submitEmailForm(emailFormRef)"
                  >确认
                </el-button>
              </span>
            </template>
          </el-dialog>
        </div>
      </li>
      <li class="ant-list-item">
        <div class="ant-list-item-meta">
          <div class="ant-list-item-meta-content">
            <h4 class="ant-list-item-meta-title">微信登录</h4>
            <div class="ant-list-item-meta-description">
              已绑定微信：<span class="strong">li***sign</span>
            </div>
          </div>
        </div>
        <div class="ant-list-item-action">
          <el-button type="primary" link @click="emailFormDialogVisible = true"
            >绑定</el-button
          >
          <el-dialog
            v-model="emailFormDialogVisible"
            title="绑定邮箱"
            width="600px"
          >
            <div>
              <el-form
                ref="emailFormRef"
                :model="emailForm"
                :rules="emailRules"
                label-position="top"
                label-width="120px"
                status-icon
              >
                <el-form-item label="当前邮箱" prop="oldEmail">
                  <el-input v-model="emailForm.oldEmail" readonly />
                </el-form-item>
                <el-form-item label="新邮箱" prop="email">
                  <el-input v-model="emailForm.email" />
                </el-form-item>
                <el-form-item label="验证码" prop="code">
                  <div class="w-full">
                    <el-row :gutter="20">
                      <el-col :span="18">
                        <el-input v-model="emailForm.code" />
                      </el-col>
                      <el-col :span="6">
                        <el-button type="primary" class="w-full"
                          >发送验证码</el-button
                        >
                      </el-col>
                    </el-row>
                  </div>
                </el-form-item>
              </el-form>
            </div>
            <template #footer>
              <span class="dialog-footer">
                <el-button
                  @click="
                    resetForm(emailFormRef);
                    emailFormDialogVisible = false;
                  "
                  >取消</el-button
                >
                <el-button type="primary" @click="submitEmailForm(emailFormRef)"
                  >确认
                </el-button>
              </span>
            </template>
          </el-dialog>
        </div>
      </li>
      <li class="ant-list-item">
        <div class="ant-list-item-meta">
          <div class="ant-list-item-meta-content">
            <h4 class="ant-list-item-meta-title">Gitee登录</h4>
            <div class="ant-list-item-meta-description">
              已绑定Gitee：<span class="strong">li***sign</span>
            </div>
          </div>
        </div>
        <div class="ant-list-item-action">
          <el-button type="primary" link>绑定</el-button>
        </div>
      </li>
      <li class="ant-list-item">
        <div class="ant-list-item-meta">
          <div class="ant-list-item-meta-content">
            <h4 class="ant-list-item-meta-title">开源中国登录</h4>
            <div class="ant-list-item-meta-description">
              已绑定开源中国：<span class="strong">li***sign</span>
            </div>
          </div>
        </div>
        <div class="ant-list-item-action">
          <el-button type="primary" link>绑定</el-button>
        </div>
      </li>
      <li class="ant-list-item">
        <div class="ant-list-item-meta">
          <div class="ant-list-item-meta-content">
            <h4 class="ant-list-item-meta-title">微信小程序登录</h4>
            <div class="ant-list-item-meta-description">
              已绑定微信小程序：<span class="strong">li***sign</span>
            </div>
          </div>
        </div>
        <div class="ant-list-item-action">
          <el-button type="primary" link>绑定</el-button>
        </div>
      </li>
    </ul>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref } from "vue";
import type { FormInstance, FormRules } from "element-plus";
import rules from "@/utils/rules";

const pswdFormDialogVisible = ref(false);
const phoneFormDialogVisible = ref(false);
const emailFormDialogVisible = ref(false);
const secretFormDialogVisible = ref(false);

const emailFormRef = ref<FormInstance>();

const emailForm = reactive({
  oldEmail: "",
  email: "",
  code: "",
});

const emailRules = reactive<FormRules>({
  oldEmail: [rules.required(), rules.email()],
  email: [rules.required(), rules.email()],
  code: [rules.required(), rules.verificationCode()],
});

const saveLoading = ref(false);

// 绑定邮箱
const submitEmailForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) {
    return;
  }
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log("submit!");
      console.log(fields);
      saveLoading.value = true;
    } else {
      console.log("error submit!", fields);
    }
  });
};

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) {
    return;
  }
  formEl.resetFields();

  pswdFormDialogVisible.value = false;
  phoneFormDialogVisible.value = false;
  emailFormDialogVisible.value = false;
  secretFormDialogVisible.value = false;
};
</script>

<style lang="less" scoped>
.ant-list {
  width: 100%;
}

.ant-list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  color: rgba(0, 0, 0, 0.85);
}

.ant-list-split .ant-list-item {
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

/* .ant-list-split .ant-list-item:last-child {
  border-bottom: none;
} */

.ant-list-item-meta {
  display: flex;
  flex: 1 1;
  align-items: flex-start;
  max-width: 100%;
}

.ant-list-item-meta-content {
  flex: 1 0;
  width: 0;
  color: rgba(0, 0, 0, 0.85);
}

.ant-list-item-action {
  flex: 0 0 auto;
  margin-left: 48px;
  padding: 0;
  font-size: 0;
  list-style: none;
}

.ant-list-item-meta-title {
  margin-bottom: 4px;
  color: rgba(0, 0, 0, 0.85);
  font-size: 14px;
  line-height: 1.5715;
}

.ant-list-item-meta-description {
  color: rgba(0, 0, 0, 0.45);
  font-size: 14px;
  line-height: 1.5715;
}
</style>
